<template>
    <div>
        <back-head title="提交申请" returnFlag="true"></back-head>

        <!-- 基本信息 -->
        <el-card class="mgb20" shadow="hover">
            <div slot="header" class="clearfix">
                <span class="title">基本信息</span>
            </div>
            <el-row class="info">
                <el-col :span="10">
                    <p><span class="label">订单编号：</span>{{orderNo}}</p>
                    <p class="indent5"><span class="label">商品名称：</span>{{baseInfo.productName}}</p>
                </el-col>
                <el-col :span="7">
                    <p><span class="label">SKUID：</span>{{baseInfo.skuCode}}</p>
                    <p><span class="label">SKU单价：</span>¥{{baseInfo.originPrice}}</p>
                </el-col>
                <el-col :span="7">
                    <p><span class="label">实付金额小计：</span>¥{{baseInfo.subtotalAmount}}</p>
                </el-col>
            </el-row>
        </el-card>

        <!-- 退货信息 -->
        <el-card class="mgb20" shadow="hover">
            <div slot="header" class="clearfix">
                <span class="title">退货信息</span>
            </div>
            <el-form 
                :inline="true" 
                :model="ruleForm" 
                :rules="rules" 
                ref="ruleForm" 
                label-width="120px" 
                class="submitForm">
                <el-form-item label="申请退货数量" prop="applyNumber">
                    <el-input 
                        v-model="ruleForm.applyNumber"
                        placeholder="请输入申请退货数量"
                        style="width: 150px;">
                    </el-input>
                    <span>&nbsp;&nbsp;&nbsp;(最多可退{{baseInfo.waitRefundedCount}}件)</span>
                </el-form-item>
                <el-form-item label="退货原因" prop="returnReason">
                    <el-select 
                        v-model="ruleForm.returnReason" 
                        style="width: 150px;">
                        <el-option
                            v-for="item in ruleForm.returnReasonList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <div class="infoMsg">
                        <p>1——无理由，需用户支付邮费</p>
                        <p>2——质量问题，严选支付邮费，发顺丰到付</p>
                    </div>
                </el-form-item>
                <br>
                <el-form-item label="退货说明" prop="explain">
                    <el-input 
                        type="textarea" 
                        v-model="ruleForm.explain"
                        :rows="5"
                        style="width: 360px;">
                    </el-input>
                </el-form-item>
                <br>
                <el-form-item label="上传凭证">
                    <img-upload ref="childImg">
                        <p class="upload_info">质量问题必须上传凭证图片，无理由非必填</p>
                    </img-upload>
                </el-form-item>
                <br>
                <el-form-item>
                    <el-button type="danger" @click="$router.go(-1)">取消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
    import imgUpload from '../../common/components/imgUpload'
    export default {
        components : {
            imgUpload
        },
        data() {
            return {
                orderNo : this.$route.query.orderNo,
                skuCode : this.$route.query.skuCode,
                baseInfo: JSON.parse(sessionStorage.getItem('skuData')),
                ruleForm: {
                    applyNumber: '',
                    returnReason: '1',
                    returnReasonList: [{
                        value: '1',
                        label: '七天无理由'
                    },{
                        value: '2',
                        label: '质量问题'
                    }],
                    explain: ''
                },
                params: '',     // 表单要提交的参数
                rules: {
                    applyNumber: [
                        { required: true, message: '请输入申请退货数量', trigger: 'blur'},
                        { pattern:/^[0-9]+$/, message: '请输入正确的申请退货数量',trigger: 'blur'},
                    ],
                    returnReason:[
                        { required: true, trigger: 'blur'}
                    ],
                    explain: [
                        { required: true, message: '请填写退货说明', trigger: 'blur'}
                    ]
                }
            }
        },
        created(){
        },
        methods: {            
            applyBtn(id){
                this.$router.push({'path':'/submitApply',query:{id:id}})
            },
            submitForm(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // 当退货原因是质量问题是判断是否有上传图片
                        if(this.ruleForm.returnReason == '2'){
                            if(this.$refs.childImg.subimgList.length == 0 ){
                                this.$message.error("质量问题必须上传照片凭证");
                                return false;
                            }
                        }
                        
                        this.submitApply();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            submitApply(){
                let paramsData =
                       {
                            applySku:{
                                applyPicList: this.$refs.childImg.subimgList.length == 0 ? null : this.$refs.childImg.subimgList,
                                applySkuReason:{
                                    reason: this.ruleForm.returnReason,
                                    reasonDesc: this.ruleForm.explain,
                                },
                                count: this.ruleForm.applyNumber,
                                originalPrice: this.baseInfo.originPrice,
                                packageId: this.baseInfo.packageId,
                                skuId: this.skuCode,
                                subtotalPrice: this.baseInfo.subtotalAmount
                            },
                            applyUser: {
                                mobile: "",
                                name: ""
                            },
                            orderId: this.orderNo,
                            requestId:""
                        }
                let config = {
                    headers: { 'Content-Type': 'application/json;charset=UTF-8','Authorization':this.$cookie.get('Authorization')}
                }
                const instance = this.$axios.create({})
                instance.post("/admin/refund/orderRefundApply.json",paramsData,config)
                    .then(res => {
                        const data = res.data;
                        if(data.success){
                             this.$message.success('提交成功');
                             setTimeout(() => {
                                 this.$router.go(-1);
                             }, 500);
                        }else{
                            this.$message.error(data.message);
                            return false;
                        } 
                    })
                    .catch(
                        err => {
                             this.$message.error("服务器异常，请重试");
                             return false;
                        }
                    )
            }
        }
    }

</script>


<style scoped>
    .label{
        font-weight: bold;
    }
    .info p{
        padding: 8px 20px 8px 0;
        line-height: 1.6em;
    }
    .info .indent5{
        padding-left: 5em;
        text-indent: -5em;
    }
    .submitForm{
        color: #606266;
    }
    .infoMsg{
        display: inline-block;
        margin-left: 30px;
        font-size: 12px;
        color: #999;
        height: 32px;
        line-height: 1.6em;
        vertical-align: top;
    }
</style>
